<template>
	<view class="page" v-if="checkPermission(['WORKFLOW:APPROVAL'])">

		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
			active-color="#ffaaff" v-show="canEdit"/>

		<!--第一个选项卡-->
		<view v-if="current == 0" class="list" v-show="canEdit" >
			<view class="item" v-for="one in list" :key="one.id">
				<view class="left">
					<image :src="one.photo" mode="widthFix" class="photo"></image>
					<view class="name">{{ one.name }}</view>
					<view class="desc">{{one.dept}}</view>
				</view>
				<view class="center">
					<view class="title">{{ one.front }}</view>
					<view class="title">{{ one.type }}申请</view>
					<view class="attr">日期：{{ one.date }}</view>
					<view class="attr">时长：{{ one.hours }}</view>
					<view class="attr,driver" v-if="one.driver!=null">需要司机</view>
					<view class="status">状态：待审批</view>
				</view>
				<view class="right">
					<button class="btn" @tap="toPage(one.processType,one.id,one.taskId)">审批</button>
				</view>
			</view>
		</view>
		<!-- 第二个选项卡 -->
		<view v-if="current == 1" class="list" v-show="canEdit">
			<view class="item" v-for="one in list" :key="one.id" @tap="toPage(one.processType, one.id, null)">
				<view class="left">
					<image :src="one.photo" mode="widthFix" class="photo"></image>
					<view class="name">{{ one.name }}</view>
					<view class="desc">（发起）</view>
				</view>
				<view class="center">
					<view class="title">{{ one.sameDept}}{{ one.type }}申请</view>
					<view class="attr">日期：{{ one.date }}</view>
					<view class="attr">时长：{{ one.hours >= 1 ? one.hours : '小于1' }}小时</view>
					<view class="attr">
						本人审批：
						<text
							:class="{ green: one.result_1 == '同意', red: one.result_1 == '不同意' }">{{ one.result_1 }}</text>
					</view>
					<view class="attr">
						最终结果：
						<text class="result" v-if="one.result_2 == null">等待中</text>
						<text v-if="one.result_2 != null"
							:class="{ green: one.result_2 == '同意', red: one.result_2 == '不同意' }">{{ one.result_2 }}</text>
					</view>
				</view>
				<view class="right">
					<block v-if="one.processStatus == '已结束'">
						<image :src="one.lastUserPhoto" mode="widthFix" class="icon"></image>
						<view class="name">{{ one.lastUserName }}</view>
						<view class="desc">（终审）</view>
					</block>
					<block v-if="one.processStatus == '未结束'">
						<image src="https://www.retoc.xyz/icon/icon-20.png" mode="widthFix" class="icon"></image>
						<view class="desc">审批进行中</view>
					</block>
				</view>
			</view>
		</view>
		<view class="icons" @click="showpop" v-if="canEdit">
			<img class="imgs" src="https://www.retoc.xyz/icon/search_list.png" alt="">
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" >
					<text class="text">查询类型</text>
					<view class="typea" >
						<img class='img' src="https://www.retoc.xyz/icon/nav-5.png" alt="">
						<picker :range="typeArray" :range-key="'name'" :value="typeIndex" @change="typeChange">
							{{typeArray[typeIndex].name}}
						</picker>
					</view>
				
				</view>
			</uni-popup>
		</view>
	</view>


</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				canEdit:false,
				page: 1,
				length: 20,
				list: [],
				isLastPage: false,
				items: ['待审批', '已审批'],
				current: 0,
				types:'all',
				typeArray: [
					{
						name:'全部',
						types:'all'
					},{
						name:'会议',
						types:'meeting'
					},{
						name:'请假',
						types:'leave'
					},{
						name:'用车',
						types:'car'
					},{
						name:'出差',
						types:'evection'
					},{
						name:'加班',
						types:'ot'
					}],
				typeIndex: 0,
				
			}
		},
		methods: {
			showpop() {
				this.$refs.popup.open();
			},
			toPage: function(processType, id, taskId) {

				let url = '../approval/approval?processType=' + processType + '&id=' + id;
				if (taskId != null) {
					url += '&taskId=' + taskId;
				}
				console.log("to", url);
				uni.navigateTo({
					url: url
				});
			},
			typeChange: function(e) {
				
				this.typeIndex = e.detail.value;
				this.types=this.typeArray[e.detail.value].types
				console.log('types',this.types);
				this.$refs.popup.close();
				this.canEdit=false;
				this.loadData(this);
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.page = 1
					this.list = []
					this.isLastPage = false
					this.loadData(this)
				}
			},
			loadData: function(ref) {
				//查询未审批的任务
				let type;
				if (ref.current == 0) {
					type = 0;
				} else {
					type = 1;
				}
				let data = {
					type: type,
					page: ref.page,
					length: ref.length,
					code: ref.code,
					token: uni.getStorageSync("token"),
					types: ref.types
				};
				uni.showLoading({
					title: "加载中，请稍后",
				})
				// console.log("data",data);
				ref.ajax(ref.url.checkPendingApprove, 'POST', data, function(resp) {
					let result = resp.data.result;
					uni.hideLoading();
					ref.canEdit=true;
					console.log("result", result);
					if (result == null || result.length == 0) {
						ref.isLastPage = true;
						ref.page = ref.page - 1;
						if (ref.page > 1) {
							uni.showToast({
								icon: 'none',
								title: '已经到底了'
							});
						}
					}
					let list = [];
					for (let i in result) {
						let one = result[i];
						if (one.types == "meeting") {
							if (one.sameDept) {
								one.front = "同部门"
							} else {
								one.front = "跨部门"
							}

							if (one.type == 1) {
								one.type = '线上会议';
							} else {
								one.type = '线下会议';
							}

							if (one.hours < 1) {
								one.hours = "小于1小时"
							} else {
								one.hours = one.hours + "小时"
							}
						}
						if (one.types == "leave") {
							one.date = /\d{4}-\d{1,2}-\d{1,2}/g.exec(one.date)[0];
							if (one.type == 1) {
								one.type = '病假';
							} else if (one.type == 2) {
								one.type = '事假';
							} else {
								one.type = '年假';
							}
							if (one.hours < 8) {
								one.front = one.hours + "小时"
								one.hours = one.hours + "小时"
							} else {
								one.front = Math.ceil(one.hours / 8) + "天"
								one.hours = Math.ceil(one.hours / 8) + "天"
							}
						}
						if (one.types == "car") {
							one.front = one.carName
							one.type = "用车"
							if (one.hours >= 24) {
								one.hours = Math.ceil(one.hours / 24) + "天"
							} else {
								one.hours = one.hours + "小时"
							}
						}
						if (one.types == "evection") {
							one.front = one.place
							one.type = '出差'
							if (one.hours >= 24) {
								one.hours = Math.ceil(one.hours / 24) + "天"
							} else {
								one.hours = one.hours + "小时"
							}
						}
						if(one.types=="ot"){
							one.front=one.reason
							one.type="加班"
						}
						if (ref.current == 1 && one.processStatus == '已结束') {
							list.push(Number(one.lastUser));
						}
					}
					if (ref.current == 1 && list.length > 0) {
						//TODO 查询发起人与审批人的信息
						ref.ajax(ref.url.selectUserPhotoAndName, 'POST', {
							ids: JSON.stringify(list)
						}, function(resp) {
							let nameAndPhoto = resp.data.result;
							for (let one of result) {
								if (one.hasOwnProperty("lastUser")) {
									let temp = nameAndPhoto[0]
									one.lastUserName = temp.name
									one.lastUserPhoto = temp.photo
								}
							}
							ref.list = result;
						});

					} else {
						ref.list = result;
					}
				});
			},
			onShow: function() {
				this.page = 1;
				this.isLastPage = false;
				this.list = []
				this.canEdit=false;
				uni.pageScrollTo({
					scrollTop: '0'
				});
				this.loadData(this);
			},
			// onReachBottom: function() {
			// 	if (this.isLastPage) {
			// 		return;
			// 	}
			// 	this.page = this.page + 1;
			// 	this.loadData(this);
			// },

		}
	}
</script>

<style lang="less">
	@import url("approval_list.less");
</style>
